<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>飞机大战——子弹的设计与处理</title>
	</head>
	<body>
		<canvas id="myca" width="891" height="673" <!-- style="border:solid;background-color:#57bbf1;" -->>
		    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
		</canvas>
	</body>
	<script>
		var can = document.getElementById("myca");
		
		var ctx = can.getContext("2d");
		
		var background1 = new Image() ;
		background1.src = "img/road0.png" ;
		
		var background2 = new Image() ;
		background2.src = "img/road1.png" ;
		
		
		
		document.addEventListener("keydown", onkeydown);
		
		var plan=function(img,x,y){
			//如果包含敌机，或者设计飘雪之类的效果
			//可以：var classname=function(image,x,y,n){...}
			this.img = img;
			this.x = x;
			this.y = y;			
		}
		//给飞机类添加(属性和方法)绘制方法
		plan.prototype.draw = function (ctx) {
		   
		   ctx.drawImage(this.img, this.x , this.y);
		};
		 //给飞机类添加(属性和方法)移动方法
		 plan.prototype.move = function (dx, dy) {
		     this.x += dx;
		     this.y += dy;
		 };
		 
		var img=new Image();
		img.src="img/plane2.png";
		myplane = new plan(img, 400, 400);
		
	var location1=0;
	var location2=-673;
	var isup=0;
	 setInterval(function () {
	    
		if(isup==0){
			ctx.drawImage(background1, 0, location1++) ;
			ctx.drawImage(background2, 0, location2++) ;
			if(location1==673){
				location1=-673;
			}
			if(location2==673){
				location2=-673;
			}
		}
		if(isup==1){
			ctx.drawImage(background1, 0, location1--) ;
			ctx.drawImage(background2, 0, location2--) ;
			if(location1==-673){
				location1=673;
			}
			if(location2==-673){
				location2=673;
			}
		}
	 	myplane.draw(ctx);
		
		for (let i = bullets.length - 1; i >= 0; i--) {
		    if (bullets[i].y < 100)
		        bullets.splice(i, 1); 
		    else
		        bullets[i].draw(ctx);
		}
	 }, 1000 / 60);
		
		//子弹类
		var Bullet = function (x, y, r) {
		    this.x = x;
		    this.y = y;
			this.r = r;
		};
					
		Bullet.prototype.draw = function (ctx) {
			ctx.beginPath();
		    ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false); 
			ctx.fillStyle="#dc4900";
			ctx.fill();
			ctx.closePath();
			this.y--;		    
		 };	
		var bullets = [];
				
		function onkeydown(e) {
	    if (e.keyCode==32) {
	       bullets.push(new Bullet(myplane.x+25, myplane.y-10,4));//
	    }else if (e.keyCode==37) {
	        myplane.move(-10,0);
	    }else if (e.keyCode==39) {
	        myplane.move(10,0);
	    }else if (e.keyCode==38) {
	        myplane.move(0,-10);
	    }else if (e.keyCode==40) {
	        myplane.move(0,10);
	    }else if (e.keyCode==13) {
	        if(isup==1){
				isup=0;
			}
			else{
				isup=1;
			}
	    }
		
	}
	</script>
	
</html>
